<template>
	<view style="height: 100vh;position: relative;background-color: #f2f2f2;">
		<u-navbar title='已完成'   left-icon-color="white" :autoBack="true" :titleStyle="{'color':'white'}" bgColor="#13989a"
			:placeholder="true"></u-navbar>
		<view class="container">
			<view class="floor" style="font-size: 24rpx;color: #a1a1a1;" v-if="msg">
				<view class="title flex" style="justify-content: space-between;">
					<text>测试门店</text>
					<text style="font-size: 24rpx;color: #a1a1a1;" @click="detaliShow=true">查看更多 ></text>
				</view>
				<view style="display: flex;flex-wrap: wrap;justify-content: space-around;margin: 20rpx 0;">
					<view class="workItem">
						<text>得分率</text>
						<text style="color: #f25f41;font-size: 30rpx;">{{msg.scoreRate}}%</text>
					</view>
					<view style="height: 50rpx;width: 1rpx;background-color: #f3f3f3;">

					</view>
					<view class="workItem">
						<text>实际得分</text>
						<text style="color: #f25f41;font-size: 30rpx;">{{msg.patrolScore}}.0/{{msg.fullScore}}.0</text>
					</view>
				</view>
				<view
					style="font-size: 28rpx;color: #5f5f5f;padding: 30rpx;background-color:#f7f7f7;border-radius: 20rpx;">
					{{msg.templateName}}
				</view>
				<view>
					<view class="title" style="margin: 20rpx 0;">
						考评意见
					</view>
					<view
						style="font-size: 28rpx;color: #5f5f5f;padding: 30rpx;background-color:#f7f7ff;border-radius: 20rpx;">
						{{msg.spotCheckRemark}}
					</view>
				</view>
			</view>
			<u-subsection activeColor="#13989a" :list="list" :current="current" @change="sectionChange"></u-subsection>
			<view class="wrapper" style="margin: 20rpx 0;" >
				<view class="floor" style="width: 88%;" v-for="(v,i) in PatrolRecordDetailsVo" :key="i">
					<view class="task">
						<view class="tasktital">
							[{{v.recordScore}}分]{{v.problemName}}
						</view>
						<view v-if="v.problemImg&&v.problemImg.length&&v.problemImg.split(',').length">
							<view style="position: relative;display: inline-block;">
								<image @click="viewImage(i,v.problemImg)" :src="'http://'+url" mode="" v-for="(url,j) in v.problemImg.split(',')"
									:key="j"
									style="width: 120rpx;height: 120rpx;border-radius: 10rpx;margin: 10rpx;">
								</image>
							</view>
						</view>
						<view class="flex" style="margin: 10rpx 0rpx;">
							<u-input :value="v.problemRemark||'无备注'" :disabled="true"></u-input>
						</view>
						<view style="margin: 10rpx 0rpx;">
							<u-input placeholder="扣分 0.0"  :value="v.isQualified==2?'-'+v.recordScore:0" :disabled="true"></u-input>
						</view>
						<view style="margin: 10rpx 0rpx;" class="flex">
							<view style="width: 100rpx;" v-if="v.isQualified!=1">
								<u-tag text="未考评" size="mini" v-if="v.isQualified==0"></u-tag>
								<u-tag text="不合格"  type="warning"  size="mini" v-if="v.isQualified==2"></u-tag>
							</view>
							<view style="width: 80rpx;" v-else>
								<u-tag text=" 合格"  type="success" size="mini" v-if="v.isQualified==1"></u-tag>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="detaliShow" @close="detaliShow=false" round="10" mode="bottom">
			<view class="overdueForm"  v-if="msg">
				<view
					style="text-align: center;font-size: 30rpx;margin-bottom: 50rpx;margin-top: 50rpx;font-weight: 700;">
					基础信息
				</view>
				<view class="floor" style="background-color: #f7f7f7;">
					<view class="title">
						{{msg.assignName}}
					</view>
					<!-- <view class="form">
						<text class="lable">编号：</text>
						<text class="value">111</text>
					</view>
					<view class="form">
						<text class="lable">所属组织：</text>
						<text class="value">111</text>
					</view> -->
				</view>
				<view class="floor" style="background-color: #f7f7f7;">
					<view class="title">
						考评执行
					</view>
					<view class="form">
						<text class="lable">巡查人：</text>
						<text class="value">{{msg.userName}}</text>
					</view>
					<!-- <view class="form">
						<text class="lable">考评耗时</text>
						<text class="value">00小时00分15秒</text>
					</view> -->
					<view class="form flex">
						<text class="lable">拍照签到</text>
						<view class="value" style="display: flex;flex-direction: column;align-items: start;">
							<text v-if="msg.signTime">{{msg.signTime}}</text>
							<image :src="'http://'+msg.signImg" mode="" v-if="msg.signImg"
								style="width: 100rpx;height: 100rpx;"></image>
						</view>
					</view>
				</view>
				<!-- <view class="floor" style="background-color: #f7f7f7;">
					<view class="title">
						问题单指派
					</view>
					<view class="form">
						<text class="lable">整改人：</text>
						<text class="value">111</text>
					</view>
					<view class="form">
						<text class="lable">一级审核：</text>
						<text class="value">111</text>
					</view>
				</view> -->
				<view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//是否合格 0 未考评 1 是 2 不合格
				list: ['全部','未考评', '合格', '不合格'],
				current: 0,
				templateId: 0,
				detaliShow: false,
				PatrolRecordDetailsVo:[],
				msg:null,
			}
		},
		onLoad(option) {
			if (option.patrolRecordId) {
				this.patrolRecordId = option.patrolRecordId
				this.getPatrolRecordDetailsVo() 
				this.getPatrolRecordDetails()
				this.getPatrolRecordProblemData()
			}
		},
		methods: {
			getPatrolRecordProblemData(){
				uni.$u.http.get('/patrol/getPatrolRecordProblemData', {
					params:{
						patrolRecordId:this.patrolRecordId,
					}
				}).then(res=>{
					if(res){
						this.list=['全部'+res.totalNum,'未考评', '合格'+res.qualifiedNum, '不合格'+res.unqualified]
					}
				})
			},
			getPatrolRecordDetails(){
				uni.$u.http.get('/patrol/getPatrolRecordDetails', {
					params:{
						patrolRecordId:this.patrolRecordId,
					}
				}).then(res=>{
					if(res){
						this.msg=res
					}
				})
			},
			getPatrolRecordDetailsVo(){
				uni.$u.http.post('/patrol/getPatrolRecordDetailsVo', {
					pageNumber:1,
					pageSize:1000,
					patrolRecordId:this.patrolRecordId,
					isQualified:this.current==0?null:this.current-1
				}).then(res=>{
					this.PatrolRecordDetailsVo=res.data
				})
			},
			getLargeVo() {
				uni.$u.http.get('/patrol/getLargeVo', {
					params: {
						templateId: this.templateId
					}
				}).then(res => {

				})
			},
			imagePoolShowFn(flag) {
				this.imagePoolShow = true
				if (flag) {
					// 从图库选择
					this.isChoocsImg = true
				} else {
					//编辑图库
					this.isChoocsImg = false
				}
			},
			viewImage(listIndex,str) {
				let listArr=str.split(',').map(url=>'http://'+url)
				uni.previewImage({
					current: listIndex,
					urls: listArr,
					longPressActions: {
						itemList: ['保存图片'],
						success: data => {
							uni.closePreviewImage()
							/* 保存图片到系统相册 */
							if (data.tapIndex == 0) {
								uni.getImageInfo({
									src: listArr[listIndex],
									success: function(res) {
										console.log(res)
										uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
											filePath: res.path, //图片文件路径
											success: function() {
												uni.showToast({
													title: '图片保存成功',
													icon: 'none',
												});
											},
											fail: function(e) {
												console.log(e);
												uni.showToast({
													title: '图片保存失败',
													icon: 'none',
												});
											},
										});
									},
									fail: function(e) {
										console.log(e);
										uni.closePreviewImage()
										uni.showToast({
											title: '图片保存失败',
											icon: 'none',
										});
									},
								})
							}
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			imageFn() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
					}
				});
			},
			sectionChange(e) {
				console.log(e)
				this.current = e
				this.getPatrolRecordDetailsVo()
			},
			blurSearch() {

			},
			toPath(url) {
				uni.navigateTo({
					url: `/packageC/pages/${url}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form {
		margin: 10rpx 0;
		font-size: 24rpx;

		.lable {
			color: #818181;
			margin-right: 50rpx;
		}

		.value {
			color: #636363;
		}
	}

	.overdueForm {
		// background-color: #f7f7f7;
		margin-bottom: 100rpx;
	}

	::v-deep.right-box {
		.u-collapse-item {
			font-weight: 700;
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 10rpx;

		}
		
		.u-line {
			border: unset;
		}

		.u-input {
			background-color: #f7f7f7;
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 150rpx;
		background-color: #ffffff;
	}

	::v-deep.wrapper {
		.u-tag{
			text-align: center;
		}
	}

	.left-box {
		background-color: #f7f7f7;
	}

	.scroll-view-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		width: 180rpx;
	}

	.workItem {
		font-size: 24rpx;
		width: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.container {
		width: 100vw;
		z-index: 10;
		position: absolute;
		top: 180rpx;
		overflow: hidden;
		border-radius: 20rpx;
	}

	.workerSearch {
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		padding-left: 22rpx;
		width: 100%rpx;
		height: 60rpx;
		background-color: #e6e6e6;
		opacity: 0.9;
		margin: 10rpx 0;
	}

	.floor {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin: 30rpx;
		margin-bottom: 20rpx;

		.title {
			font-weight: 600;
			font-size: 30rpx;
			color: black;
		}
	}
</style>